body { text-align: center; font-family:"微软雅黑", arial;margin:0; padding:0; font-size:14px; color:#333;}
div,form,img,ul,ol,li,dl,dt,dd,p{margin: 0; padding: 0; border: 0;text-align: left;box-sizing:border-box;}
li{list-style-type:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}

a{text-decoration: none;color: #333}
a:hover {color: #bc2931;}
input.solt{width: 80px;}
input.mel{width: 180px;}
input.long{width: 280px;}
input.slong{width: 480px;}

body,html{width: 100%;height: 100%;background-color: #efefef;}
#app {width: 100%;height: 100%;}
.warpBg{width: 100%;height: 100%;}
.main{margin-left: 210px;padding-top: 54px;padding-right:10px }
.main .info{background: #fff;border-radius: 6px;padding: 10px 20px;overflow: hidden;}
.header{width: 100%;height: 48px;border-bottom: 2px solid #c40000;background: #2a2a2a;position:absolute;top: 0;left: 0;text-align: center;line-height: 48px;color: #fff;font-size: 20px;}
.header span{float: right;margin-right: 20px;font-size: 14px;background: url('/static/images/admin.png') center left no-repeat;background-size: 26%;padding-left: 40px;}
.header a{color: #fff;cursor: pointer;}

.leftList{width: 200px;float: left;height: 100%;background: #1f2124;padding-top: 54px;border-right: #ddd solid 1px;color: #ccc;overflow:auto;}
.leftList .item p{background: #18191b;line-height: 3;font-size: 15px;text-indent: 36px;margin: 3px 0;position: relative;cursor: pointer;}
.leftList .item p.active i{transform:rotate(45deg);left: 0px;top: -30px;}

.leftList .item i{display:inline;position: absolute;transform:rotate(-45deg);left: -20px;top: 10px;}
.leftList .item i:before{content:'';width: 0; height: 0;border-left: 8px solid transparent;border-right: 16px solid transparent;border-bottom: 8px solid #ccc;}
.leftList .item a{text-indent: 36px;line-height: 2;display: block;color: #ccc}
.leftList .item a:hover{color: #c40000}
.leftList .item a.active{background: #c40000}

.login{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background:rgba(227,224,224,1);}
.login .info{width: 300px;background: #fff;border: #ddd solid 1px;margin: auto;margin-top: 20%;border-radius: 8px;padding: 20px;}
.login .info input{width: 240px;height: 30px;border: #ddd solid 1px;padding: 4px 10px;margin-bottom: 20px;border-radius: 4px;color: #333}
.login .info button{width: 260px;height: 40px;border: #41b3a1 solid 1px; background:#74d2c7; background:-moz-linear-gradient(top, #74d2c7, #41b3a1);  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#74d2c7), to(#41b3a1));  
background:-o-linear-gradient(top, #74d2c7, #41b3a1);color: #fff;font-size: 18px;cursor: pointer;border-radius: 4px;}

.mt20{margin-bottom: 20px;}
.mt20 p{padding: 4px;}
.navList{height: 34px;}
.navList span{margin: 4px;background: #dcdcdc;padding: 4px;cursor: pointer;border-radius: 4px;}
.navList span.on{background: #333;color: #fff}
.listInfo .logo{width: 30px;height: 30px;}
.listInfo .txtLeft{text-align: left;text-indent: 10px;}
.listInfo{width: 100%;text-align: center;border-collapse: collapse;}
.listInfo td{border: #ddd solid 1px;padding: 3px 4px;}
.listInfo a{cursor: pointer;margin: 4px;}

.title{background: #ddd;font-size: 18px;line-height: 1.6;text-indent: 10px;}
.formBox{background: #fff;padding: 20px 10px;border-radius: 6px;}
.formBox p{margin-top: 10px;overflow: hidden;}
.formBox p .name{width: 100px;display: inline-block;font-size: 14px;text-align: right;padding-right: 10px;float: left;line-height: 36px;}
.formBox input{border-radius: 4px;border: 1px solid #ddd;color: #1f2d3d;height: 26px;line-height: 1;padding: 3px 10px;font-size: 14px;}
.formBox select{border-radius: 4px;border: 1px solid #ddd;color: #1f2d3d;height: 36px;line-height: 1;padding: 3px 10px;font-size: 14px;}
.formBox textarea{border-radius: 4px;border: 1px solid #ddd;color: #1f2d3d;width: 480px;height: 60px;line-height: 1;padding: 10px;font-size: 14px;}
.formBox .inputBox{padding-left: 110px;padding-top: 30px;}
.formBox .inputBox button{margin-right: 10px;width: 120px;height: 40px;cursor: pointer;}
.formBox .textarea{width: 800px;float: left}
.formBox img{width: 100px;height: 100px;border: #ddd solid 1px;}
.formBox .ql-editor{min-height: 200px;}
.formBox i{margin-left: 4px;color: #ff0000}
.ql-toolbar.ql-snow .ql-formats{margin-right: 0}

.indexList ul li{width: 260px;height: 160px;border-radius: 10px;border: #ddd solid 1px;float: left;margin: 10px;color: #fff;padding: 10px;padding-top: 86px;font-size: 16px;cursor: pointer;}
.indexList ul li span{font-size: 42px;}
.iconA{background: #43B5AD}
.iconB{background: #578EBE}
.iconC{background: #8674A6}
.iconD{background: #E25A59}
.iconE{background: #578EBE}
.iconF{background: #2255a4}
.iconG{background: #ffb848}

/*分页*/
.pageList{float: right;margin:10px; }

/*图片相册*/
.imgList{overflow: hidden;background: #fff;border-bottom: #ddd solid 1px;padding-bottom: 10px;}
.imgList ul li{float: left;position: relative;width: 110px;text-align: center;}
.imgList ul li span{width: 20px;height: 20px;cursor: pointer;background: url('/static/images/del.png') center no-repeat;position: absolute;top: 0;right: 0}
.imgList ul li img{width: 100px;height: 100px;border: #ddd solid 1px;}

.itemInfo .formBox{position: relative;z-index: 10}
.upBg{width: 100%;height: 100%;background: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0}


/*聊天客服*/
.socket{width: 1000px;height: 680px;background: #fff;border: #dcdcdc solid 2px;margin: auto;}
.socketLeft{width: 200px;float: left;height: 680px;border-right: #ddd solid 2px;}
.socketLeft ul li{line-height: 34px;border-bottom: #ddd solid 1px;text-indent: 10px;cursor:pointer;}
.socketLeft ul li.active{color: #c40000}
.socketLeft ul li span{color: #ff0000;font-size: 12px;line-height: 34px;}
.socketLeft ul li:hover{color: #c40000}
.socketLeft ul li.on{background: #dcdcdc}
.socketLeft .title{text-align: center;border-bottom: #ddd solid 1px;font-size: 18px;line-height: 36px;background: #fff}
.socketRight{margin-left: 200px;height: 680px;}
.socketRight .getBox{height: 500px;overflow: auto;}
.socketLoad{height: 400px;}

.socketRgith .right{float: right}
.socketRight .title{text-align: center;border-bottom: #ddd solid 1px;font-size: 18px;line-height: 36px;background: #fff}
.socketRight .postBox{border-top: #ddd solid 2px;position: relative;margin-top: 2px;}
.socketRight .postBox textarea{width: 644px;height: 124px;border: none;padding-right: 140px;padding: 5px;}
.socketRight .postBox button{position: absolute;bottom: 4px;right: 4px;width: 140px;height: 40px;cursor: pointer;}

.getBox{padding: 6px;}
.getBox .right p{text-align: right}

.tabBox{overflow: hidden;background: #fff;padding: 20px;}
.tabBox input{padding: 2px;margin-right: 10px;}
.tabBox bottom{border: #ddd solid 1px;cursor: pointer;padding: 2px 8px;background: #dcdcdc;border-radius: 4px;}
.tabBox span{margin-left: 20px;}
.main .orderInfo{height: 680px;overflow:auto;}
.main .orderInfo p{height: 26px;overflow: hidden;line-height: 26px;}
.shouSuo{overflow: hidden;background: #fff;padding: 20px 20px;}
.shouSuo .left{float: left;line-height: 28px;}
.shouSuo .right{float: right}
.shouSuo input{margin-left: 4px;border: #ddd solid 1px;padding: 4px;}
.shouSuo button{cursor: pointer;margin-left: 4px;}

.submitInput{background: #fff;border: #ccc solid 1px;border-radius: 4px;color: #666;transition: all .2s;}
.submitInput:hover{border: #999 solid 1px;color: #333;background: #ececec}

.emptyInput{background: #fff;border: #ccc solid 1px;border-radius: 4px;color: #666;transition: all .2s;}
.emptyInput:hover{border: #f76b6b solid 1px;color: #f76b6b;background: #fae2e2}

/*上传按钮*/
.file {
    position: relative;
    display: inline-block;
    background: #dcdcdc;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #666;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;cursor: pointer;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;cursor: pointer;
}
.file:hover {
    background: #ccc;
    color: #333;
    text-decoration: none;
}

/*加载中*/
.allLoad{width: 100%;height: 100%;background: rgba(255,255,255,0.4);position: fixed;top: 0;left: 0}
.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.load{}
.print{cursor: pointer;}

.container1 > div, .container2 > div, .container3 > div {
  width: 10px;
  height: 10px;
  background-color: #67CF22;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


